<<template>
  <view class="news-home">
    <!-- 顶部导航栏（分类标签） -->
    <scroll-view class="category-scroll" scroll-x="true" show-scrollbar="false">
      <view class="category-item" v-for="(item, index) in categories" :key="index"
        @click="switchCategory(index)" :class="{ active: currentCategory === index }">
        {{ item }}
      </view>
    </scroll-view>

    <!-- 天气与搜索栏 -->
    <view class="weather-search">
      <view class="weather-info">
        <text class="city">{{ weather.city }}</text>
        <text class="temp">{{ weather.temp }}</text>
        <text class="condition">{{ weather.condition }}</text>
        <text class="pm25">PM2.5 {{ weather.pm25 }}</text>
      </view>
      <view class="search-box" @click="showSearch">
        <uni-icons type="search" size="28rpx" color="#999"></uni-icons>
        <text class="search-placeholder">搜索关键词</text>
      </view>
    </view>

    <!-- 数据更新提醒（3秒后自动消失） -->
    <view class="update-tip" v-if="showUpdateTip">
      为您更新了{{ updateCount }}条内容
    </view>

    <!-- 新闻列表（含广告） -->
    <view class="news-list">
      <custom-news-item v-for="news in displayNewsList" :key="news.id" :news="news"></custom-news-item>
      <!-- 随机插入广告 -->
      <custom-ad-item :ad="randomAd" v-if="displayNewsList.length > 2"></custom-ad-item>
    </view>
  </view>
</template>

<script>
import customNewsItem from '../../components/custom-news-item.vue';
import customAdItem from '../../components/custom-ad-item.vue';
import newsData from '../../data/news.json';

export default {
  components: {
    customNewsItem,
    customAdItem
  },
  data() {
    return {
      categories: [], // 新闻分类
      weather: {}, // 天气数据
      originalNewsList: [], // 原始新闻列表
      displayNewsList: [], // 展示用新闻列表（含搜索过滤）
      adsList: [], // 广告列表
      randomAd: {}, // 随机广告
      currentCategory: 0, // 当前选中分类
      showUpdateTip: false, // 是否显示更新提醒
      updateCount: 0, // 更新条数
      searchKey: '' // 搜索关键词
    };
  },
  onLoad() {
    // 初始化数据
    this.initData();
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.refreshNews();
  },
  methods: {
    // 初始化数据
    initData() {
      this.categories = newsData.categories;
      this.weather = newsData.weather;
      this.originalNewsList = newsData.newsList;
      this.adsList = newsData.adsList;
      this.displayNewsList = [...this.originalNewsList];
      // 随机选择一条广告
      this.randomAd = this.adsList[Math.floor(Math.random() * this.adsList.length)];
    },

    // 切换分类（实际项目可对接分类接口）
    switchCategory(index) {
      this.currentCategory = index;
      // 模拟分类切换效果，实际需根据分类ID请求对应新闻
      uni.showToast({ title: `切换到${this.categories[index]}分类`, icon: 'none' });
    },

    // 下拉刷新新闻
    refreshNews() {
      // 模拟请求新数据（实际项目对接接口）
      setTimeout(() => {
        const newNews = [
          {
            id: Date.now(),
            title: `刷新新增：${this.categories[this.currentCategory]}分类最新动态`,
            source: "系统推荐",
            commentCount: 0,
            publishTime: "刚刚",
            cover: "/static/images/meinv.png",
            isTop: false
          }
        ];
        this.updateCount = newNews.length;
        this.originalNewsList = [...newNews, ...this.originalNewsList];
        this.displayNewsList = [...newNews, ...this.displayNewsList];
        // 显示更新提醒
        this.showUpdateTip = true;
        // 3秒后隐藏提醒
        setTimeout(() => {
          this.showUpdateTip = false;
        }, 3000);
        // 停止下拉刷新动画
        uni.stopPullDownRefresh();
      }, 1000);
    },

    // 显示搜索框（实际项目可跳转搜索页或弹出搜索组件）
    showSearch() {
      uni.navigateTo({ url: '/pages/search/search' });
    },

    // 搜索过滤新闻（实际项目可在搜索页实现）
    filterNews() {
      if (!this.searchKey) {
        this.displayNewsList = [...this.originalNewsList];
        return;
      }
      this.displayNewsList = this.originalNewsList.filter(news => 
        news.title.includes(this.searchKey) || news.source.includes(this.searchKey)
      );
    }
  }
};
</script>

<style scoped>
.news-home {
  background-color: #fafafa;
  min-height: 100vh;
}
/* 分类导航 */
.category-scroll {
  white-space: nowrap;
  background-color: #fff;
  padding: 15rpx 20rpx;
  border-bottom: 1px solid #f5f5f5;
}
.category-item {
  display: inline-block;
  font-size: 32rpx;
  padding: 8rpx 20rpx;
  margin-right: 10rpx;
  color: #333;
}
.category-item.active {
  color: #d00;
  font-weight: bold;
  border-bottom: 3rpx solid #d00;
}
/* 天气与搜索 */
.weather-search {
  background-color: #fff;
  padding: 15rpx 20rpx;
  margin-bottom: 10rpx;
}
.weather-info {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: flex;
  gap: 15rpx;
  flex-wrap: wrap;
}
.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  padding: 12rpx 20rpx;
  gap: 10rpx;
}
.search-placeholder {
  font-size: 26rpx;
  color: #999;
}
/* 更新提醒 */
.update-tip {
  background-color: #fff;
  color: #d00;
  font-size: 26rpx;
  text-align: center;
  padding: 10rpx;
  border-bottom: 1px solid #f5f5f5;
}
/* 新闻列表 */
.news-list {
  background-color: #fff;
}
</style>